<template>
	<view class="sxran-im-content" >
		<view class="sxran-im-content-body">
			<view class="sxran-im-content-header">
				<slot name="header">
					<sxran-im-text :text="title" size='16'></sxran-im-text>
				</slot>
			</view>
			<view class="sxran-im-content-main">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sxran-im-content",
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-content {
		height: 100%;
		width: 100%;
		overflow: hidden;
		background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
		// background-image: url('/static/texture.png');
		&-body {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;

			.sxran-im-content-header {
				position: relative;
				padding: $uni-spacing-row-lg;
				display: flex;
				flex-direction: column;

				// height: 40px;
				&::before {
					position: absolute;
					content: '';
					height: 1px;
					width: 200%;
					bottom: 0;
					background-color: var(--uni-border-color);
					transform: scale(0.5);
					transform-origin: left;
					left: 0;
				}
			}

			.sxran-im-content-main {
				flex-grow: 1;
				overflow: hidden;
			}

		}
	}
</style>